<!DOCTYPE html>
<html>
<head>
    {include file="common/meta"}
    <style>
        .refresh {
            display: block;
            border-radius: .25rem;
            overflow: hidden;
        }
        .text-sm .btn {
            font-size: 0.95rem !important;
        }
        .text-sm .form-control {
            height: calc(2.25rem + 2px);
        }
    </style>
</head>
<body class="hold-transition login-page text-sm">
<div class="login-box">
    <div class="login-logo">
        <a href="">{:lang('Backstage entrance')}</a>
    </div>
    <div class="card">
        <div class="card-body login-card-body" style="border-radius: .25rem">
            <p class="login-box-msg">{:lang('Sign in to start your session')}</p>

            <form action="{:url('/login/index')}" method="post" class="frm-operate" novalidate>
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="{:lang('Username')}" name="username" autocomplete="off">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-envelope"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input type="password" class="form-control" name="password" placeholder="{:lang('Password')}">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-7">
                        <div class="icheck-primary">
                            <input type="text" class="form-control" placeholder="{:lang('Captcha')}" name="captcha" autocomplete="off">
                        </div>
                    </div>
                    <div class="col-5">
                        <a href="#" class="refresh"><img src="{:url('/login/verify')}" style="width: 100%;" /></a>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-md-12 mt-2">
                        <input type="hidden" name="url" value="{$url}">
                        <button type="submit" class="btn btn-primary btn-block btn-submit">{:lang('Sign In')}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<p class="text-secondary mt-5 text-sm">Copyright {:date('Y',time())} <a href="{:config('cms.app_url')}" class="text-secondary" target="_blank">{:config('ver.cms_app')}</a> All Rights Reserved</p>

{include file="common/script"}

<script>
    require(['jquery','Form','layer'], function ($, Form) {
        $('.refresh').click(function (e) {
            e.preventDefault();
            $(this).find('img').attr('src',"{:url('/login/verify')}?r="+Math.random());
        });

        Form.api.init({
            isValidate:false, // 取消nice验证
            before: function (data) {
                let validate = true;
                $.each(data,function (k,v) {
                    if (v.name=="username" && v.value.length===0) {
                        Layer.msg('{:lang("Please fill in the user name")}', {icon:2});
                        validate = false;
                        return false;
                    }
                    if (v.name=="password" && v.value.length===0) {
                        Layer.msg('{:lang("Please fill in the user password")}', {icon:2});
                        validate = false;
                        return false;
                    }
                    if (v.name=="captcha" && v.value.length===0) {
                        Layer.msg('{:lang("Please fill in the verification code")}', {icon:2});
                        validate = false;
                        return false;
                    }
                });
                if (!validate) {
                    return false;
                }
                return data;
            },
            success: function (data, response) {
                Layer.msg(response.msg,{time:1000, icon:1},function (e) {
                    window.location.href = data.url;
                });
                return false;
            },
            error: function (res) {
                if (res.code==-1001) {
                    $('.refresh').click();
                }
                layer.msg(res.msg, {time:4000, icon:2, offset:"ct"});
                return false;
            }
        });
    });
</script>

</body>
</html>